<div  style="padding-top: 30px;">
    <div style="align-content: center; width: 100%">
    <table class="data_table" border="1px">
        <caption style="font-size: medium; margin-bottom: 10px">注册用户信息统计汇总</caption>
        <tr>
            <td>今日注册用户数</td>
            <td>月增加用户数量</td>
            <td>注册用户总数</td>
            <td>今日活跃用户数量  </td>
        </tr>
        <tr>
            <td><{$today_register}></td>
            <td><{$recent_month}></td>
            <td><{$total_user}></td>
            <td><{$today_active}></td>
        </tr>
    </table>
    </div>

    <div style="text-align: center;width: 100%;margin-top: 30px">
        开始日期：<input id="start" class="easyui-datebox" ></input>&nbsp;&nbsp;&nbsp;&nbsp;
        结束日期：<input id="end" class="easyui-datebox" ></input>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="show(1)" value="查询">
    </div>
    <div style="text-align: center;width: 100%">
    <div id="data_line" style="height:400px;width: 80%;margin: 20px auto"></div>
    </div>
    <!-- ECharts单文件引入 -->
    <script src="__STATIC__/js/echarts/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '__STATIC__/js/echarts'
            }
        });
        function show(val){
            if(val==1){
                var start = $("#start").datebox('getValue');
                var end = $("#end").datebox('getValue');
            }else{
                var start = '';
                var end = '';
            }



        // 使用
        require(
                [
                    'echarts',
                    'echarts/theme/helianthus',
                    'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('data_line'));

                    myChart.showLoading({
                        text: "正在拼命为您加载数据~~"
                    });

                    var option = {
                        title : {
                            text: '用户活跃度统计',
                            subtext: ''
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[]
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: false},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: false, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        dataZoom : {
                            show : true,
                            realtime: true,
                            start : 50,
                            end : 100,
                            zoomLock:false
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : []
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} 人'
                                }
                            }
                        ],
                        series : []
                    };
                    //通过Ajax获取数据
                    $.ajax({
                        type: "post",
                        async: false, //同步执行
                        url: "<{:U('Data/userActive')}>",
                        dataType: "json", //返回数据形式为json
                        data:{
                            start: start,
                            end:end
                        },
                        success: function (result) {
                            //alert(result.legend);
                           // if (result) {
                                //将返回的category和series对象赋值给options对象内的category和series
                                //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            option.xAxis[0].data = result.xdata;
                            option.series = result.series;
                            option.legend.data = result.legend;
                                myChart.hideLoading();
                                myChart.setOption(option);
                           // }
                        },
                        error: function (errorMsg) {
                            alert("亲~数据加载失败请刷新重试~~");
                        }
                    });

                    // 为echarts对象加载数据
                    //myChart.setOption(option);
                }
        );
        }
        show(0);
    </script>
</div>